<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .box{
                width: 200px;
                height: 260px;
                border: 1px solid black;
                display: inline-block;
                margin: 10px;
            }
            .d1{
                font-size: 10px;
            }
            .d2{
                height: 20px;
                border: dashed 1px black;
                font-size: 10px;
            }
            img{
                width: 200px;
                height: 220px;
            }
            .show{
                width: 500px;
                height: 600px;
                border: 1px solid lawngreen;
            }
        </style>
    </head>
    <body>

        <div class="box" draggable="true">
            <img src="img/img1.jpg" alt="">
            <div class="d1">js语音精粹</div>
            <div class="d2">40￥</div>
        </div>
        <div class="box" draggable="true">
            <img src="img/img2.jpg" alt="">
            <div class="d1">js权威指南</div>
            <div class="d2">120￥</div>
        </div>
        <div class="box" draggable="true">
            <img src="img/img3.jpg" alt="">
            <div class="d1">精通js</div>
            <div class="d2">35￥</div>
        </div>
        <div class="box" draggable="true">
            <img src="img/img4.jpg" alt="">
            <div class="d1">js编程艺术</div>
            <div class="d2">45￥</div>
        </div>
        <div class="show"></div>
    </body>
</html>